<template>
  <div class="goods-list">
    <el-button
      style="float: right"
      type="primary"
      @click="centerDialogVisible = true"
      >上传<i class="el-icon-upload el-icon--right"></i
    ></el-button>
    <el-empty
      v-if="tableData.length == 0"
      description="没有上传过商品，点击右上角上传"
    >
    </el-empty>
    <el-dialog
      title="上传商品"
      :visible.sync="centerDialogVisible"
      width="50%"
      center
      destroy-on-close
    >
      <GoodsForm ref="product" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="upGoods">上 传</el-button>
      </span>
    </el-dialog>
    <GoodsTable
      ref="goods"
      :tableData="tableData"
      v-if="tableData.length != 0"
      @delGoods="del"
      @updata="editPro"
    />
  </div>
</template>

<script>
import GoodsForm from "../../../components/GoodsForm.vue";
import GoodsTable from "./GoodsTable.vue";
export default {
  data() {
    return {
      tableData: [],
      centerDialogVisible: false,
      pages: 1,
    };
  },
  methods: {
    editPro(pay, index) {
      // console.log(pay, index, "huixain");
      this.tableData.splice(index, 1, pay);
      this.tableData = JSON.parse(JSON.stringify(this.tableData));
    },
    del(x) {
      this.tableData.splice(x, 1);
      this.tableData = JSON.parse(JSON.stringify(this.tableData));
    },
    load() {
      this.axios
        .get("/api/v1/product/mygoods", {
          params: { pages: this.pages },
        })
        .then((res) => {
          this.tableData = [...this.tableData, ...res.data];
          this.pages++;
        });
    },
    upGoods() {
      let file = this.$refs.product.file;
      let data = this.$refs.product.product;
      let cascader = this.$refs.product.$refs.cascader.value;
      data.uid = this.$store.state.user._id;
      data.category = JSON.stringify(cascader);
      // let cascader = this.$refs.product.$refs.cascader.$refs.cascader.getCheckedNodes()[0];//级联选择详细信息
      if (data) {
        let formdata = new FormData();
        formdata.append("product", file);
        for (let i in data) {
          formdata.append(i, data[i]);
        }
        this.axios({
          method: "post",
          url: "/api/v1/product/add",
          data: formdata,
          headers: {
            "Content-Type": "multipart/form-data",
          },
        }).then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.msg(res, this);
          }
        });
      }
    },
  },
  components: { GoodsForm, GoodsTable },
  created() {
    this.load();
  },
  mounted() {},
};
</script>